<script setup>
import IconList from './product.vue';
import { ElPagination, ElInput } from 'element-plus';
import { listIcons } from '@iconify/vue';
import { ref, watch, computed } from 'vue';

const emits = defineEmits(['change']);

const dialogRef = ref(null);

const iconType = ref('ep');
const icons = ref(listIcons());
const total = computed(() => Math.floor(icons.value.length / 6));

const page = ref(1);
const current = ref(icons.value[0]);
const iconRef = ref(null);

const changeIcons = () => {
  if (iconType.value === 'all') {
    icons.value = listIcons();
  } else {
    icons.value = listIcons('', iconType.value);
  }
  page.value = 1;
};

const setIconName = index => {
  current.value = icons.value[index];
};

watch(page, val => {
  iconRef.value.changePage(val);
});

watch(icons, val => {
  iconRef.value.changePage(val);
});

const confirm = () => {
  emits('change', current.value);
};

const openModel = () => dialogRef.value?.openModel();
defineExpose({ openModel });
</script>
<template>
  <a-dialog ref="dialogRef" title="选择商品" width="800px" @close="confirm">
    <div class="w-full">
      <div class="mb-3 flex flex-row justify-end items-center gap-2">
        <el-input class="w-1/3" v-model="iconType" @change="changeIcons"> </el-input>
        <a-button type="primary" @click="changeIcons">搜索</a-button>
      </div>
      <IconList :list="icons" :page="page" @change="setIconName" ref="iconRef" :rows="3" :cols="8" />
      <div class="flex justify-between flex-row w-full items-center mt-1">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :pager-count="5"
          v-model:current-page="page"
          size="small"
        />
      </div>
    </div>
  </a-dialog>
</template>

<style lang="scss" scoped></style>
